*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.carousel{
  margin-left: 300px;
  border: 1px solid #000;
  width: 400px;
  height: 200px;
  margin-bottom: 40px;
}

.panels {
  width: 400px;
  height: 200px;
  position: relative;
  border: 1px solid  green;
  overflow: hidden;
}
.carousel .panels a {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 1px solid rgb(247, 241, 241);
}
.carousel .panels a:first-child{
  z-index: 10;
}
/* 宽高都撑满父亲 */
.panels img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel .action{
  margin-top: 10px;
  display: flex;
  color: #666;
  font-size: 14px;
}
.action span{
  cursor: pointer;
}
.action .prev{
  order: 1;
}
.action .next{
  order: 3;
}
.action .dots{
  order: 2;
  flex-grow: 1;
  text-align: center;
}
.dots span{
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 5px;
  background: #eee;
  transition: all .4s;
}
.dots span.active{
  width: 14px;
  background: #aaa;
}